<script lang="ts" setup>
import { getUserQrcodeKeyApi } from '@/common/apis/user'
import { onMounted, ref } from 'vue'

// 定义二维码的值
const qrCodeValue = ref('')
const qrCodeStatus = ref<'active' | 'expired' | 'loading' | 'scanned'>('loading')

// 获取二维码的信息
const fetchQrCode = async () => {
  try {
    // 设置为加载中
    qrCodeStatus.value = 'loading'
    const response = await getUserQrcodeKeyApi()
    qrCodeValue.value = response.data.data
    // 设置为有效状态
    qrCodeStatus.value = 'active'
  } catch (error) {
    // 设置为过期状态
    qrCodeStatus.value = 'expired'
    console.log('获取二维码失败', error)
  }
}

// 点击刷新二维码
const qrcodeFlushed = async () => {
  fetchQrCode()
}

onMounted(() => {
  fetchQrCode()
})
</script>

<template>
  <div class="qrcode">
    <h1>扫码登录</h1>
    <a-space direction="vertical" class="qrcode-space">
      <!-- 动态展示二维码 -->
      <a-qrcode :size="230" @click="qrcodeFlushed" :status="qrCodeStatus" :value="qrCodeValue" />
    </a-space>
  </div>
</template>

<style lang="scss" scoped>
.qrcode {
  width: 100%;
  display: flex;
  flex-direction: column;
  &-space {
    margin-top: 30px;
    display: flex;
    align-items: center;
  }
}
</style>
